<template>
  <div class="template" v-if="!getIsPhone">
    login
  </div>
  <div class="login-signup-template" v-else>
    <div>
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class="form">
        <slot name='form'></slot>
      </div>
      <div class="hint">
        <slot name='hint'></slot>
      </div>
      <div class="submit">
        <slot name="submit"></slot>
      </div>
      <login-bottom v-show="showFooter"></login-bottom>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import LoginBottom from './login-bottom'
import logo from "@/assets/imgs/logo.png"
export default {
  components: {
    LoginBottom
  },
  data() {
    return {
      logo: logo,
      showFooter: true,
      screenSize: document.body.clientHeight,
      showSize: document.body.clientHeight,

    }
  },
  mounted() {
    window.onresize = () => {
      this.showSize = document.body.clientHeight
    }
  },
  methods: {
    
  },
  watch: {
    showSize(newVal) {
      if (this.screenSize > newVal) {
        this.showFooter = false
      } else {
        this.showFooter = true
      }
    }
  },
  
  computed:{
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px) 
    .login-signup-template
      box-sizing border-box 
      padding 0 10px
      .logo 
        width 160px 
        margin 0 auto 
        padding-top 40px
        img 
          width 100%
      .form 
        border 1px solid $color-divide-line
        box-sizing border-box 
        border-radius 3px
        background $color-text-button
      .hint 
        display flex
        height 45px 
        justify-content space-between 
        align-items center
        box-sizing border-box 
        border 1px solid transparent
      .submit 
        display flex
        justify-content space-between
       

</style>